ReviewApplicationsRoot - Code Metrics - Inspection of "Add text for Experience constants directly to API..." - GCTC-NTGC/TalentCloud - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — feature/experience-step-functi... ( 062671...af7bb9 )

by Tristan

created 2020-09-16 20:24 UTC

ReviewApplicationsRoot A

↳ Parent: Project

Complexity

Total Complexity

Size/Duplication

Total Lines	175
Duplicated Lines	0 %

Importance

Changes

Metric	Value
wmc	15
eloc	139
dl	0
loc	175
rs	10
c	0
b	0
f	0

/* eslint camelcase: "off", @typescript-eslint/camelcase: "off" */
import React from "react";
import ReactDOM from "react-dom";

// Internationalizations
import { injectIntl, defineMessages, WrappedComponentProps } from "react-intl";

import camelCase from "lodash/camelCase";
import Swal from "sweetalert2";
import {
  Job,
  Application,
  ReviewStatus,
  ApplicationReview,
} from "../../models/types";
import ReviewApplications from "./ReviewApplications";
import { find } from "../../helpers/queries";
import * as routes from "../../helpers/routes";
import { classificationString } from "../../models/jobUtil";
import { axios } from "../../api/base";
import RootContainer from "../RootContainer";
import { Portal } from "../../models/app";
import { ReviewStatusId } from "../../models/lookupConstants";

interface ReviewApplicationsProps {
  job: Job;
  initApplications: Application[];
  reviewStatuses: ReviewStatus[];
  portal: Portal;
}

interface ReviewApplicationsState {
  applications: Application[];
  savingStatuses: { applicationId: number; isSaving: boolean }[];
}

interface ReviewSubmitForm {
  review_status_id?: number | null;
  notes?: string | null;
}

const localizations = defineMessages({
  oops: {
    id: "review.applications.alert.oops",
    defaultMessage: "Save",
    description: "Dynamic Save button label",
  },
  somethingWrong: {
    id: "review.applications.reviewSaveFailed",
    defaultMessage:
      "Something went wrong while saving a review. Try again later.",
    description: "Dynamic Save button label",
  },
});

class ReviewApplicationsRoot extends React.Component<
  ReviewApplicationsProps & WrappedComponentProps,
  ReviewApplicationsState
> {
  public constructor(props: ReviewApplicationsProps & WrappedComponentProps) {
    super(props);
    this.state = {
      applications: props.initApplications,
      savingStatuses: props.initApplications.map(application => ({
        applicationId: application.id,
        isSaving: false,
      })),
    };
    this.handleStatusChange = this.handleStatusChange.bind(this);
    this.handleBulkStatusChange = this.handleBulkStatusChange.bind(this);
    this.handleNotesChange = this.handleNotesChange.bind(this);
    this.updateReviewState = this.updateReviewState.bind(this);
    this.handleSavingStatusChange = this.handleSavingStatusChange.bind(this);
  }

  protected updateReviewState(
    applicationId: number,
    review: ApplicationReview,
  ): void {
    const { applications } = this.state;
    const updatedApplications = applications.map(application => {
      if (application.id === applicationId) {
        return Object.assign(application, { application_review: review });
      }
      return { ...application };
    });
    this.setState({ applications: updatedApplications });
  }

  protected handleSavingStatusChange(
    applicationId: number,
    isSaving: boolean,
  ): void {
    const { savingStatuses } = this.state;
    const statuses = savingStatuses.map(item =>
      item.applicationId === applicationId
        ? { applicationId, isSaving }
        : { ...item },
    );
    this.setState({ savingStatuses: statuses });
  }

  protected submitReview(
    applicationId: number,
    review: ReviewSubmitForm,
  ): void {
    const { intl } = this.props;
    this.handleSavingStatusChange(applicationId, true);
    axios
      .put(routes.applicationReviewUpdate(intl.locale, applicationId), review)
      .then(response => {
        const newReview = response.data as ApplicationReview;
        this.updateReviewState(applicationId, newReview);
        this.handleSavingStatusChange(applicationId, false);
      })
      .catch(() => {
        Swal.fire({
          icon: "error",
          title: intl.formatMessage(localizations.oops),
          text: intl.formatMessage(localizations.somethingWrong),
        });
        this.handleSavingStatusChange(applicationId, false);
      });
  }

  protected handleStatusChange(
    applicationId: number,
    statusId: number | null,
  ): void {
    const { applications } = this.state;
    const application = find(applications, applicationId);
    if (application === null) {
      return;
    }
    const oldReview = application.application_review
      ? application.application_review
      : {};
    const submitReview = Object.assign(oldReview, {
      review_status_id: statusId,
    });
    this.submitReview(applicationId, submitReview);
  }

  protected handleBulkStatusChange(
    applicationIds: number[],
    statusId: number | null,
  ): void {
    const { applications } = this.state;
    const { intl } = this.props;
    const changedApplications = applications.filter(application =>
      applicationIds.includes(application.id),
    );
    let errorThrown = false;
    changedApplications.map(application => {
      const oldReview = application.application_review
        ? application.application_review
        : {};
      const submitReview = Object.assign(oldReview, {
        review_status_id: statusId,
      });
      this.handleSavingStatusChange(application.id, true);
      const request = axios
        .put(
          routes.applicationReviewUpdate(intl.locale, application.id),
          submitReview,
        )
        .then(response => {
          const newReview = response.data as ApplicationReview;
          this.updateReviewState(application.id, newReview);
          this.handleSavingStatusChange(application.id, false);
        })
        .catch(() => {
          this.handleSavingStatusChange(application.id, false);
          // Only show error modal first time a request fails
          if (!errorThrown) {
            errorThrown = true;
            Swal.fire({
              icon: "error",
              title: intl.formatMessage(localizations.oops),
              text: intl.formatMessage(localizations.somethingWrong),
            });
          }
        });
      return request;
    });
  }

  protected handleNotesChange(
    applicationId: number,
    notes: string | null,
  ): void {
    const { applications } = this.state;
    const application = find(applications, applicationId);
    if (application === null) {
      return;
    }
    const oldReview = application.application_review
      ? application.application_review
      : {};
    const submitReview = Object.assign(oldReview, {
      notes,
    });
    this.submitReview(applicationId, submitReview);
  }

  public render(): React.ReactElement {
    const { applications, savingStatuses } = this.state;
    const { reviewStatuses, job, portal, intl } = this.props;

    const reviewStatusOptions = reviewStatuses
      .filter(status => status.id in ReviewStatusId)
      .map(status => ({
        value: status.id,
        label: camelCase(status.name),
      }));

    return (
      <ReviewApplications
        jobId={job.id}
        title={job.title[intl.locale]}
        classification={classificationString(job)}
        closeDateTime={job.close_date_time}
        applications={applications}
        reviewStatusOptions={reviewStatusOptions}
        onStatusChange={this.handleStatusChange}
        onBulkStatusChange={this.handleBulkStatusChange}
        onNotesChange={this.handleNotesChange}
        savingStatuses={savingStatuses}
        portal={portal}
      />
    );
  }
}

const renderReviewApplications = (
  container: HTMLElement,
  portal: Portal,
): void => {
  if (
    container.hasAttribute("data-job") &&
    container.hasAttribute("data-applications") &&
    container.hasAttribute("data-review-statuses") &&
    container.hasAttribute("data-locale")
  ) {
    const job = JSON.parse(container.getAttribute("data-job") as string);
    const applications = JSON.parse(
      container.getAttribute("data-applications") as string,
    );
    const reviewStatuses = JSON.parse(
      container.getAttribute("data-review-statuses") as string,
    );
    const IntlReviewApplicationsRoot = injectIntl(ReviewApplicationsRoot);
    ReactDOM.render(
      <RootContainer>
        <IntlReviewApplicationsRoot
          job={job}
          initApplications={applications}
          reviewStatuses={reviewStatuses}
          portal={portal}
        />
      </RootContainer>,
      container,
    );
  }
};

if (document.getElementById("review-applications-container")) {
  const container = document.getElementById(
    "review-applications-container",
  ) as HTMLElement;
  renderReviewApplications(container, "manager");
}

if (document.getElementById("review-applications-container-hr")) {
  const hrContainer = document.getElementById(
    "review-applications-container-hr",
  ) as HTMLElement;
  renderReviewApplications(hrContainer, "hr");
}

export default injectIntl(ReviewApplicationsRoot);


1			/* eslint camelcase: "off", @typescript-eslint/camelcase: "off" */
2			import React from "react";
3			import ReactDOM from "react-dom";
4
5			// Internationalizations
6			import { injectIntl, defineMessages, WrappedComponentProps } from "react-intl";
7
8			import camelCase from "lodash/camelCase";
9			import Swal from "sweetalert2";
10			import {
11			Job,
12			Application,
13			ReviewStatus,
14			ApplicationReview,
15			} from "../../models/types";
16			import ReviewApplications from "./ReviewApplications";
17			import { find } from "../../helpers/queries";
18			import * as routes from "../../helpers/routes";
19			import { classificationString } from "../../models/jobUtil";
20			import { axios } from "../../api/base";
21			import RootContainer from "../RootContainer";
22			import { Portal } from "../../models/app";
23			import { ReviewStatusId } from "../../models/lookupConstants";
24
25			interface ReviewApplicationsProps {
26			job: Job;
27			initApplications: Application[];
28			reviewStatuses: ReviewStatus[];
29			portal: Portal;
30			}
31
32			interface ReviewApplicationsState {
33			applications: Application[];
34			savingStatuses: { applicationId: number; isSaving: boolean }[];
35			}
36
37			interface ReviewSubmitForm {
38			review_status_id?: number \| null;
39			notes?: string \| null;
40			}
41
42			const localizations = defineMessages({
43			oops: {
44			id: "review.applications.alert.oops",
45			defaultMessage: "Save",
46			description: "Dynamic Save button label",
47			},
48			somethingWrong: {
49			id: "review.applications.reviewSaveFailed",
50			defaultMessage:
51			"Something went wrong while saving a review. Try again later.",
52			description: "Dynamic Save button label",
53			},
54			});
55
56			class ReviewApplicationsRoot extends React.Component<
57			ReviewApplicationsProps & WrappedComponentProps,
58			ReviewApplicationsState
59			> {
60			public constructor(props: ReviewApplicationsProps & WrappedComponentProps) {
61			super(props);
62			this.state = {
63			applications: props.initApplications,
64			savingStatuses: props.initApplications.map(application => ({
65			applicationId: application.id,
66			isSaving: false,
67			})),
68			};
69			this.handleStatusChange = this.handleStatusChange.bind(this);
70			this.handleBulkStatusChange = this.handleBulkStatusChange.bind(this);
71			this.handleNotesChange = this.handleNotesChange.bind(this);
72			this.updateReviewState = this.updateReviewState.bind(this);
73			this.handleSavingStatusChange = this.handleSavingStatusChange.bind(this);
74			}
75
76			protected updateReviewState(
77			applicationId: number,
78			review: ApplicationReview,
79			): void {
80			const { applications } = this.state;
81			const updatedApplications = applications.map(application => {
82			if (application.id === applicationId) {
83			return Object.assign(application, { application_review: review });
84			}
85			return { ...application };
86			});
87			this.setState({ applications: updatedApplications });
88			}
89
90			protected handleSavingStatusChange(
91			applicationId: number,
92			isSaving: boolean,
93			): void {
94			const { savingStatuses } = this.state;
95			const statuses = savingStatuses.map(item =>
96			item.applicationId === applicationId
97			? { applicationId, isSaving }
98			: { ...item },
99			);
100			this.setState({ savingStatuses: statuses });
101			}
102
103			protected submitReview(
104			applicationId: number,
105			review: ReviewSubmitForm,
106			): void {
107			const { intl } = this.props;
108			this.handleSavingStatusChange(applicationId, true);
109			axios
110			.put(routes.applicationReviewUpdate(intl.locale, applicationId), review)
111			.then(response => {
112			const newReview = response.data as ApplicationReview;
113			this.updateReviewState(applicationId, newReview);
114			this.handleSavingStatusChange(applicationId, false);
115			})
116			.catch(() => {
117			Swal.fire({
118			icon: "error",
119			title: intl.formatMessage(localizations.oops),
120			text: intl.formatMessage(localizations.somethingWrong),
121			});
122			this.handleSavingStatusChange(applicationId, false);
123			});
124			}
125
126			protected handleStatusChange(
127			applicationId: number,
128			statusId: number \| null,
129			): void {
130			const { applications } = this.state;
131			const application = find(applications, applicationId);
132			if (application === null) {
133			return;
134			}
135			const oldReview = application.application_review
136			? application.application_review
137			: {};
138			const submitReview = Object.assign(oldReview, {
139			review_status_id: statusId,
140			});
141			this.submitReview(applicationId, submitReview);
142			}
143
144			protected handleBulkStatusChange(
145			applicationIds: number[],
146			statusId: number \| null,
147			): void {
148			const { applications } = this.state;
149			const { intl } = this.props;
150			const changedApplications = applications.filter(application =>
151			applicationIds.includes(application.id),
152			);
153			let errorThrown = false;
154			changedApplications.map(application => {
155			const oldReview = application.application_review
156			? application.application_review
157			: {};
158			const submitReview = Object.assign(oldReview, {
159			review_status_id: statusId,
160			});
161			this.handleSavingStatusChange(application.id, true);
162			const request = axios
163			.put(
164			routes.applicationReviewUpdate(intl.locale, application.id),
165			submitReview,
166			)
167			.then(response => {
168			const newReview = response.data as ApplicationReview;
169			this.updateReviewState(application.id, newReview);
170			this.handleSavingStatusChange(application.id, false);
171			})
172			.catch(() => {
173			this.handleSavingStatusChange(application.id, false);
174			// Only show error modal first time a request fails
175			if (!errorThrown) {
176			errorThrown = true;
177			Swal.fire({
178			icon: "error",
179			title: intl.formatMessage(localizations.oops),
180			text: intl.formatMessage(localizations.somethingWrong),
181			});
182			}
183			});
184			return request;
185			});
186			}
187
188			protected handleNotesChange(
189			applicationId: number,
190			notes: string \| null,
191			): void {
192			const { applications } = this.state;
193			const application = find(applications, applicationId);
194			if (application === null) {
195			return;
196			}
197			const oldReview = application.application_review
198			? application.application_review
199			: {};
200			const submitReview = Object.assign(oldReview, {
201			notes,
202			});
203			this.submitReview(applicationId, submitReview);
204			}
205
206			public render(): React.ReactElement {
207			const { applications, savingStatuses } = this.state;
208			const { reviewStatuses, job, portal, intl } = this.props;
209
210			const reviewStatusOptions = reviewStatuses
211			.filter(status => status.id in ReviewStatusId)
212			.map(status => ({
213			value: status.id,
214			label: camelCase(status.name),
215			}));
216
217			return (
218			<ReviewApplications
219			jobId={job.id}
220			title={job.title[intl.locale]}
221			classification={classificationString(job)}
222			closeDateTime={job.close_date_time}
223			applications={applications}
224			reviewStatusOptions={reviewStatusOptions}
225			onStatusChange={this.handleStatusChange}
226			onBulkStatusChange={this.handleBulkStatusChange}
227			onNotesChange={this.handleNotesChange}
228			savingStatuses={savingStatuses}
229			portal={portal}
230			/>
231			);
232			}
233			}
234
235			const renderReviewApplications = (
236			container: HTMLElement,
237			portal: Portal,
238			): void => {
239			if (
240			container.hasAttribute("data-job") &&
241			container.hasAttribute("data-applications") &&
242			container.hasAttribute("data-review-statuses") &&
243			container.hasAttribute("data-locale")
244			) {
245			const job = JSON.parse(container.getAttribute("data-job") as string);
246			const applications = JSON.parse(
247			container.getAttribute("data-applications") as string,
248			);
249			const reviewStatuses = JSON.parse(
250			container.getAttribute("data-review-statuses") as string,
251			);
252			const IntlReviewApplicationsRoot = injectIntl(ReviewApplicationsRoot);
253			ReactDOM.render(
254			<RootContainer>
255			<IntlReviewApplicationsRoot
256			job={job}
257			initApplications={applications}
258			reviewStatuses={reviewStatuses}
259			portal={portal}
260			/>
261			</RootContainer>,
262			container,
263			);
264			}
265			};
266
267			if (document.getElementById("review-applications-container")) {
268			const container = document.getElementById(
269			"review-applications-container",
270			) as HTMLElement;
271			renderReviewApplications(container, "manager");
272			}
273
274			if (document.getElementById("review-applications-container-hr")) {
275			const hrContainer = document.getElementById(
276			"review-applications-container-hr",
277			) as HTMLElement;
278			renderReviewApplications(hrContainer, "hr");
279			}
280
281			export default injectIntl(ReviewApplicationsRoot);
282

GCTC-NTGC / TalentCloud

Push — feature/experience-step-functi... ( 062671...af7bb9 )

ReviewApplicationsRoot A

Complexity

Size/Duplication

Importance

Duplication Side-by-Side

Filter issues like